import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider, theme } from 'antd';
import 'antd/dist/reset.css';
import { createStyles } from 'antd-style';

import { useSettings } from '@/store/settingStore';

import {
  customThemeTokenConfig,
  themeModeToken,
  colorPrimarys,
  customComponentConfig,
} from './theme';
import StaticProvider from './staticProvider';
import React, { useEffect } from 'react';


export const ThemeMode = {
  Light: 'light',
  Dark: 'dark',
}


export const customDarkAlgorithm = (token, mapToken) => {
  const derivative = theme.darkAlgorithm(token, mapToken)
  derivative.colorPrimary = token.colorPrimary
  derivative.colorText = derivative.colorTextBase
  // console.log(derivative, derivative.colorTextBase)
  return derivative
}

export default function AntdConfig({ children }) {
  const { themeMode, themeColorPresets } = useSettings();
  // const algorithm = themeMode === ThemeMode.Light ? theme.defaultAlgorithm : theme.darkAlgorithm;
  const colorPrimary = colorPrimarys[themeColorPresets];
  const colorToken = { colorPrimary, ...customThemeTokenConfig, ...themeModeToken[themeMode].token }
  const { styles } = useStyles()
  return (
    <ConfigProvider
      componentSize='middle'
      locale={zhCN}
      theme={{
        token: colorToken,
        components: { ...customComponentConfig, ...themeModeToken[themeMode].components },
        algorithm: customDarkAlgorithm,
      }}
      table={{ className: styles.table }}
    >
      {/* https://ant.design/docs/react/compatible-style-cn#styleprovider */}
      <StyleProvider hashPriority="high"><StaticProvider>{children}</StaticProvider></StyleProvider>
    </ConfigProvider>
  );
}

// Customize styles
const useStyles = () => {
  return createStyles(({ css, prefixCls }) => {
    const antCls = '.' + prefixCls
    return {
      table: css`
      ${antCls}-table{
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
      `,
    }
  })();
};